<template>
  <div class="scrool">
      <div id="zrender-canvas"></div>
  </div>
  <div class="text" v-if="show">hello</div>
</template>

<script setup>
/* eslint-disable */
import {onMounted,ref, reactive,computed} from "vue"
import * as zrender from 'zrender'
import {createCircle,createSector,creatText,creatImg} from '@/components/charts/basecharts'
import {options} from '@/components/charts/data'

const zr = ref(null)
const group = ref({})
const group4 = ref({})
const group5 = ref({})
const datas = reactive({
      step:30,  //梯形每一层步进的半径大小
      points:[250,250],   //大圆的圆心坐标
      groupgap:10,
      angle:270,   //其实渲染角度
      left:0,
      top:0
})
const pageoptions =  JSON.parse( JSON.stringify(options)) 
const neeoption = JSON.parse( JSON.stringify(options)) 
const show = ref(false)

const left = computed(() => {
  const number = datas.left
  return `${number}px`
})
// top位置
const top = computed(() => {
  const number = datas.top
  return `${number}px`
})
const mousemove=(event)=> {
  console.log(event,'event')
  let {clientX,clientY} = event
  datas.left = clientX
  datas.top = clientY
  show.value = true
}
const mouseOut = ()=> {
  show.value = false
}

// 计算角度  根据不同的角度象限去判断应该加还是减去
function calcCoordinate(startPoint, r, angle,gap=0) {
//  angle = angle%360
let qAngle
if (angle >= 0 && angle < 90) {
  qAngle = angle
} else if (angle >= 90 && angle < 180) {
  qAngle = 180 - angle
} else if (angle >= 180 && angle < 270) {
  qAngle = angle - 180
} else {
  qAngle = 360 - angle
}
 // 第二步:计算坐标增量
 const _x = Math.cos((qAngle * Math.PI) / 180) * r
 const _y = Math.sin((qAngle * Math.PI) / 180) * r
 // 第三步:求未知点坐标
let result
const [x, y] = startPoint
if (angle >= 0 && angle < 90) {
  result = [x + _x+gap, y + _y+gap]
} else if (angle >= 90 && angle < 180) {
  result = [x - _x-gap, y + _y+gap]
} else if (angle >= 180 && angle < 270) {
  result = [x -_x-gap, y - _y - gap]
} else {
    result = [x + _x + gap, y - _y -gap]
}  
  return result
}

function getangle(angle) {
let qAngle // 象限角
if (angle >= 0 && angle < 90) {
  qAngle = angle
} else if (angle >= 90 && angle < 180) {
  qAngle = 180 - angle
} else if (angle >= 180 && angle < 270) {
  qAngle = angle - 180
} else{
  qAngle = 360 - angle
}
return qAngle 
}

const init = ()=> {
  zr.value = zrender.init(document.getElementById('zrender-canvas'))
  // 定义梯形
  var triangleSelf = zrender.Path.extend({
      type: 'triangleSelf',
      shape:{
          x: 10,
          y: 0,
          width: 0,
          height: 0
      },
      buildPath: function (ctx, shape) {
          let rotate = shape.rotate
          let evetyAngle = shape.evetyAngle
          // let [x,y] = calcCoordinate(datas.points,shape.r,rotate,shape.gap)
          // let [x1,y1] = calcCoordinate(datas.points,shape.r,rotate+evetyAngle,shape.gap)
          // let [x2,y2] = calcCoordinate(datas.points,shape.r+datas.step,rotate,shape.gap)
          // let [x3,y3] = calcCoordinate(datas.points,shape.r+datas.step,rotate+evetyAngle,shape.gap)

        let x1 = 250 + 40 * Math.cos(270*Math.PI/180)
        let y1 = 250 + 40 * Math.sin(270*Math.PI/180)

        let x2 = 250 + 80 * Math.cos(270*Math.PI/180)
        let y2 = 250 + 80 * Math.sin(270*Math.PI/180)
        
        let x3 = 250 +40 * Math.cos(310*Math.PI/180)
        let y3 = 250 +40 * Math.sin(310*Math.PI/180)

        let x4 = 250 + 80 * Math.cos(310*Math.PI/180)
        let y4 = 250 + 80 * Math.sin(310*Math.PI/180)
        ctx.beginPath();
        ctx.moveTo(x1,y1)
        ctx.lineTo(x2,y2)
        ctx.arc(datas.points[0], datas.points[1],40,270*Math.PI/180,310*Math.PI/180)
        ctx.lineTo(x4,y4)
        ctx.arc(datas.points[0], datas.points[1],80,310*Math.PI/180,270*Math.PI/180,true)
     }
  })
  for(let i=0;i<7;i++) {
      let circle = createCircle(datas.points,30+i*datas.step,{lineDash:[5],stroke:'#e3e7e9'})
      zr.value.add(circle)   
  }

  let sf = new triangleSelf({
        shape: {
                  x: datas.points[0],
                  y: datas.points[1],
                  r:30+datas.step,
                  gap:0.5,
              },
              style:{
                  stroke:'#f40',
                  fill:'none'
              }
      })
      zr.value.add(sf)
}

onMounted(() => {
  init()
})
</script>

<style scoped>
.scrool {
  position: relative;
  height: 600px;
  width: 800px;
  border: 1px solid #ccc;
  border-radius: 10px;
}
#zrender-canvas {
  width:500px;
  height:500px;
}
.text {
  position: absolute;
  border: 1px solid #f40;
  left:v-bind(left);
  top:v-bind(top);
}


</style>